<template>
  <div id="main">
    <div class="table">
      <!-- 导航栏 点击不可跳转画面 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>メニュー</el-breadcrumb-item>
        <el-breadcrumb-item>ク－ボン検索</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- エラーメッセージ表示 -->
      <div v-if="errorMessage !== null" class="errorMessage">
        <span>{{ errorMessage }}</span>
      </div>

      <!-- 输入框 -->
      <div class="input-list">
        <a class="couponNumber">クーボン番号</a>
        &nbsp;
        <input type="text" v-model="couponNo" />
        &nbsp;

        <a class="CCID">CCID</a>
        &nbsp;

        <input type="text" v-model="ccid" />
        &nbsp;

        <button @click="searchAll">全て検索</button>
        &nbsp;
        <button @click="searchAvailable">利用可能検索</button>
      </div>

      <div class="input-list">
        &nbsp;&nbsp;
        <a class="code">受注番号　　</a>
        <input v-model="orderNo" />
        &nbsp;
        <button @click="searchOrder">受注検索</button>
      </div>

      <!-- 输入框 -->
      <div class="show">
        <div style="float: left;">
          <div style="float: left" class="showCode">受注番号</div>
          <input type="text" style="height: 17px;" />
          <a style="width: 224px; background: #444444">お買い物クーボン値引金額合計</a><input style="height: 17px;" />
        </div>

        <div style="float: left; text-align: center">
          <div style="float: left" class="showCode">状态</div>
          <input style="height: 17px;float: left " />
          <a style="display: block;width: 224px;float: left;text-align: center;background: #444444; ">割引率クーボン値引金額合計</a>
          <input style="height: 17px;float: left" />
        </div>
      </div>

      <!-- 展示表格 -->
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="SearchCouponVOList.couponNo" label="クーポン番号" width="110px" align="center"
            row-height="30px">
            <el-link type="primary">{{}}</el-link>
          </el-table-column>
          <el-table-column prop="SearchCouponVOList.CCID" label="CCID" width="150" align="center"></el-table-column>
          <el-table-column label="ステータス" width="80" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">準備</span>
              <span v-if="scope.row.status == 1">発行</span>
              <span v-if="scope.row.status == 2">紐付</span>
              <span v-if="scope.row.status == 3">利用中</span>
              <span v-if="scope.row.status == 4">利用済</span>
              <span v-if="scope.row.status == 5">大量</span>
              &nbsp;
              <span v-if="scope.row.lockDelete == 0">有効</span>
              <span v-if="scope.row.lockDelete == 1"> ロック</span>
              <span v-if="scope.row.lockDelete == 2">削除</span>
              <span v-if="scope.row.lockDelete == 3">発行</span>
            </template>
          </el-table-column>

          <el-table-column prop="couponTypeId" label="種別" align="center" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.couponTypeId == 0">販促金</span>
              <span v-if="scope.row.couponTypeId == 1">預かり金</span>
              <span v-if="scope.row.couponTypeId == 2">割引率</span>
              <span v-if="scope.row.couponTypeId == 3">割引率</span>
            </template>
          </el-table-column>

          <el-table-column prop="publishNo,couponName" label="発行体番号*クーポン名" align="center" width="200px">
            <template slot-scope="scope">
              {{ scope.row.publishNo }} {{ scope.row.couponName }}
            </template>
          </el-table-column>

          <el-table-column prop="discountRate" label="発行額 割引率" align="center" width="90px">
            <template slot-scope="scope">
              <span v-if="scope.row.couponTypeId <= 1">{{ scope.row.discountRate }}円</span>
              <span v-if="scope.row.couponTypeId > 1">{{ scope.row.discountRate }}%</span>
            </template>
          </el-table-column>

          <el-table-column prop="reuseMaxCountNo" label="利用額 利用回数" align="center" width="120px">
            <template slot-scope="scope">
              <span v-if="scope.row.reuseMaxCountNo == 0">「0/∞ 回」</span>
              <span v-if="scope.row.reuseMaxCountNo == 1">1回</span>
            </template>
          </el-table-column>

          <el-table-column class="date" prop="couponFrom,couponTo" label="有効期限" align="center" width="240px"
            row-height="30px">
            <template slot-scope="scope">
              <div style="white-space: pre-wrap">
                {{ scope.row.couponFrom }}/{{ scope.row.couponTo }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="chkLockSetting" label="共通ロック" width="90px" align="center"
            row-height="30px"></el-table-column>

          <el-table-column prop="minUseAmount" label="最低利用金額" width="100px" align="center"
            row-height="30px"></el-table-column>

        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      errorMessage: "",
      couponNo: "",
      ccid: "",
      orderNo:"",
      
    }
  }
};
methods: {

}

</script>

<style scoped>
#app {
  background-size: 100% 100%;
  overflow: hidden;
}

.table {
  width: 1342px;
  height: 1000px;
  margin: 20px auto;
  border: 2px #f0f0f0 solid;
  padding-top: 20px;
  padding-left: 20px;
}

.errorMessage {
  margin: auto auto;
  text-align: center;
  margin-bottom: 20px;
  line-height: 30px;
  height: 30px;
  width: 700px;
}

.input-list {
  margin-left: 20px;
  margin-bottom: 5px;
}

.couponNumber {
  font-size: 15px;
  margin-bottom: 20px;
}

.CCID {
  font-size: 15px;
  margin-bottom: 20px;
}

.code {
  font-size: 15px;
  margin-bottom: 20px;
}

.show {
  width: 800px;
  height: 120px;
  color: #ffffff;
  margin-bottom: -70px;
}

.showCode {
  background: #444444;
  width: 64px;
  display: block;
}

.check input {
  margin: auto auto;
  text-align: center;
  margin-bottom: 20px;
  line-height: 30px;
  height: 30px;
  width: 700px;

  font-size: 20px;
  border: 0px solid;
}

.el-table :deep() th.el-table__cell>.cell {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  height: 20px;
}

.el-table :deep() .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 20px;
  padding-left: 10px;
  padding-right: 10px;
  height: 20px;
  font-size: 10px;
}

.el-table :deep() th.el-table__cell {
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #fff;
  background: #444444;
}

.el-button {
  line-height: 0.1;
  white-space: nowrap;
  cursor: pointer;
  color: #606266;
  text-align: center;
  font-weight: 500;
  font-size: 10px;
}

.el-button--text {
  color: #409eff;
}
</style>